<template>
  <div id="index">
    <!-- 开始菜单 -->
    <div class="start_menu" v-if="isOpen">
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
    <!-- 开始菜单 -->
    <!-- 任务栏 -->
    <div class="taskbar">
      <span @click="open()" class="taskbar_start iconfont icon-yunzhanghu"></span>
      <div class="curr_time"><p :title="curr_date" style="padding: 0;margin: 0; line-height:0">{{  curr_time}}</p></div>
    </div>
    <!-- 任务栏 -->
    <!-- 桌面背景 -->
    <div>
      <img style="position: fixed; width: 100%; height: 100%; max-width: 100%; max-height: 100%; z-index:-999" :src="bg_image" alt="">
    </div>
    <!-- 桌面背景 -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      bg_image: '',
      taskbar_image: '',
      curr_time: this.getTime().time,
      curr_date: this.getTime().day,
      isOpen: false
    }
  },
  mounted () {
    this.bg_image = require('@/assets/bg_image.png')
    // console.log(time.getDate())
    setInterval(() => {
      this.curr_time = this.getTime().time
      this.curr_date = this.getTime().day
    }, 1000)
  },
  methods: {
    open () {
      this.isOpen = !this.isOpen
      let a = {
        'as': 0,
        'b': 1
      }
      console.log(JSON.stringify(a))
      this.$http.get('http://localhost:8080/thinkphp_5/user/get_user', JSON.stringify(a)).then((res) => {
        console.log(res)
      })
    },
    getTime () { // 获取当前时间
      let time = new Date()
      var y = time.getFullYear()
      var M = time.getMonth() > 9 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1)
      var d = time.getDate() > 9 ? time.getDate() : '0' + time.getDate()
      var h = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
      var m = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
      var s = time.getSeconds() > 9 ? time.getSeconds() : '0' + time.getSeconds()
      return {
        time: h + ':' + m + ':' + s,
        day: y + '/' + M + '/' + d
      }
    }
  }
}
</script>
<style scoped>
.taskbar {
  border-top: 1px solid #fff;
  width: 100%;
  /* height: 30px; */
  background-color: #555;
  position: fixed;
  bottom: 0;
  opacity: 0.5;
}
.taskbar_start {
  cursor: pointer;
  margin: 0;
  padding-bottom: 5px;
  padding-right: 8px;
  padding-left: 8px;
  background-color: #888;
  font-size: 35px;
  color: #fff;
}
.curr_time {
  line-height: 2.0em;
  padding-right: 5px;
  position: absolute;
  bottom: 17px;
  right:0;
  cursor: pointer;
  color: #fff;
  text-align: center;
  font-size: 14px;
}
.start_menu {
  background-color: #000;
  opacity: 0.5;
  width: 20%;
  position: absolute;
  left: 0;
  bottom: 40px;
}
</style>

